<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Item - Dividers</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Item Divider</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content id="content" class="outer-content">
        <ion-item-divider>
          <ion-label>Divider by itself</ion-label>
        </ion-item-divider>

        <ion-list>
          <ion-item-divider>
            <ion-label>Divider in List</ion-label>
          </ion-item-divider>

          <ion-item-divider color="danger">
            <ion-label>Danger Divider in List</ion-label>
          </ion-item-divider>
        </ion-list>

        <ion-item-group>
          <ion-item-divider>
            <ion-label>Divider in Item Group</ion-label>
          </ion-item-divider>
          <ion-item-divider color="secondary">
            <ion-label>Secondary Divider in Item Group</ion-label>
          </ion-item-divider>
        </ion-item-group>

        <ion-item-group>
          <ion-item>
            <ion-label>
              <ion-text color="secondary">
                <h3>Secondary header</h3>
              </ion-text>
              Plain Ol' div with some text
            </ion-label>
          </ion-item>
        </ion-item-group>

        <ion-item-group>
          <ion-item-divider>
            <ion-label>Item Divider <ion-text color="danger">Danger Span</ion-text></ion-label>
            <ion-button slot="end">button</ion-button>
          </ion-item-divider>

          <ion-item class="custom-item">
            <ion-label class="ion-text-wrap">
              Multiline text that should wrap when it is too long to fit on one line in the item. Attribute on .item
            </ion-label>
          </ion-item>
        </ion-item-group>

        <ion-item-group>
          <ion-item-divider color="dark">
            <ion-button slot="start" fill="clear">
              <ion-icon slot="icon-only" name="cloudy"></ion-icon>
            </ion-button>
            <ion-button slot="start" fill="clear" color="light">
              <ion-icon slot="icon-only" name="rainy"></ion-icon>
            </ion-button>

            <ion-label>
              Dark
              <ion-text color="primary">
                <h5>Primary h5</h5>
              </ion-text>
            </ion-label>
          </ion-item-divider>

          <ion-item>
            <ion-label class="ion-text-wrap">
              <h1>H1 Title Text</h1>
            </ion-label>
          </ion-item>
        </ion-item-group>

        <ion-item-group>
          <ion-item-divider color="light">
            <ion-avatar slot="start">
              <img src="" />
            </ion-avatar>
            <ion-label>Light</ion-label>
            <ion-button slot="end" fill="clear" color="danger">
              <ion-icon name="sunny"></ion-icon>
            </ion-button>
          </ion-item-divider>

          <ion-item-divider color="primary">
            <ion-label>Primary</ion-label>
            <ion-thumbnail slot="end">
              <img src="" />
            </ion-thumbnail>
          </ion-item-divider>
        </ion-item-group>

        <ion-item-group>
          <ion-item-divider color="secondary">Secondary</ion-item-divider>

          <ion-item>
            <ion-label>Column 1</ion-label>
            <ion-label>Column 2</ion-label>
            <ion-label>Column 3</ion-label>
          </ion-item>
        </ion-item-group>
      </ion-content>

      <style>
        .outer-content {
          --background: #f2f2f2;
        }
      </style>
    </ion-app>
  </body>
</html>
